<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 1"
          icon="el-icon-printer"
          type="primary"
          @click="dialogQrCodeVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 1"
          icon="el-icon-goods"
          type="primary"
          @click="dialogBindUserVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 1"
          icon="el-icon-user"
          type="primary"
          @click="dialogBelongUserVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="dialogAddDeviceVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 1"
          icon="el-icon-school"
          type="primary"
          @click="dialogChangeCompanyVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 1"
          icon="el-icon-office-building"
          type="primary"
          @click="dialogChangeDeptVisible = true"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 2"
          type="primary"
          @click="dialogAnalysisVisible = true"
        >{{ $t('comparison') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 2"
          type="primary"
          @click="dialogCommonSettingVisible = true"
        >{{ $t('setting') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <company-product-series-cascade :dept-id="deptId" @change="productChange"/>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="deviceName"
          clearable
          :placeholder="$t('device')+$t('name')"
          @change="searchNameChange"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="phoneNumber"
          clearable
          :placeholder="$t('cardNumber')"
          @change="phoneNumberChange"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" @change="statusChange">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <province-city-cascade :dept-id="deptId" @change="provinceCityChange"/>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="warnDesc"
          icon="el-icon-warning"
          type="primary"
          @click="unWarnDescDevices"
        />
        <el-button
          v-else
          icon="el-icon-warning-outline"
          plain
          @click="warnDescDevices"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="extendSearch?'el-icon-caret-top':'el-icon-caret-bottom'"
          @click="extendSearch = !extendSearch"
        >{{ $t('extend') + $t('search') }}
        </el-button>
      </el-form-item>
    </el-form>

    <company-device-search v-show="extendSearch" style="margin-top: 10px;width: 1100px" @change="searchChange"/>
    <el-table
      ref="multipleTable"
      :data="deviceList"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      @cell-click="getSensor"
    >
      <el-table-column type="selection" width="55"/>
      <!--      <el-table-column width="70" >-->
      <!--        <template slot-scope="scope">-->
      <!--          <device-qrcode-local-->
      <!--            :width="50"-->
      <!--            :height="50"-->
      <!--            :device-core="scope.row.deviceCore"-->
      <!--          />-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column :label="$t('device')+$t('name')">
        <template slot-scope="scope">
          <i>{{ scope.row.deviceName }} ({{ scope.row.deviceCore }})</i>
        </template>
      </el-table-column>
      <el-table-column prop="phoneNumber" :label="$t('cardNumber')"/>
      <el-table-column prop="phoneStatus" :label="$t('card')+$t('status')" :formatter="formatPhoneStatus" width="80"/>
      <el-table-column :label="$t('surplus')" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.surplus }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('status')">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status=='ONLINE'?'success':'danger'">{{ formatDeviceStatus(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="250">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-price-tag"
            @click.stop="tag(scope.row)"
          >{{ $t('tag') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-s-tools"
            @click.stop="deviceSetting(scope.row)"
          >{{ $t('setting') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-more"
            @click.stop="gotoManage(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="$t('dept')"
      :visible.sync="dialogChangeDeptVisible"
    >
      <el-form @submit.native.prevent>
        <el-form-item :label="$t('dept')" label-width="20%">
          <el-cascader
            v-model="deptId"
            filterable
            :options="treeDeptData"
            :props="{value:'id',label:'name',checkStrictly:true,emitPath:false}"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeDeptVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="changeDept()">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('company')"
      :visible.sync="dialogChangeCompanyVisible"
    >
      <el-form @submit.native.prevent>
        <el-form-item :label="$t('company')" label-width="20%">
          <el-select v-model="companyId" filterable>
            <el-option
              v-for="item in companyList"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeCompanyVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="changeDeviceListCompany">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('qrCode')"
      :visible.sync="dialogQrCodeVisible"
      width="400"
    >
      <div class="dialog-footer" style="margin-bottom: 20px">
        <el-button type="danger" @click="dialogQrCodeVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="doPrint">{{ $t('confirm') }}</el-button>
      </div>
      <div class="printOrder-data" style="margin: 0;padding: 0">
        <div
          v-for="(item,index) in qrCodes"
          :key="index"
          :class="[ index>0 ? 'qrCode2' : 'qrCode']"
        >
          <img :src="item.img" style="width: 130px;height: 130px;margin-left: 13px">
          <div style="margin-top: 5px">
            <p
              style="margin:0px; font-weight: bold; font-size: 18px;color: #000;font-family:Simsun"
            >{{ title }}</p>
            <p
              style="margin: 0px; font-weight: bold; font-size: 18px;margin-top: 5px;color: #000;font-family:Simsun"
            >{{ row1 }}</p>
            <p
              style="margin: 0px; font-weight: bold; font-size:18px;margin-top: 5px;color: #000;font-family:Simsun"
            >{{ row2 }}</p>
            <p
              style="margin: 0px; font-weight: bold; font-size: 18px;margin-top: 5px;color: #000;font-family:Simsun"
            >{{ row3 }}{{ item.deviceCore }}</p>
            <p
              style="margin: 0px; font-weight: bold; font-size: 18px;margin-top: 5px;color: #000;font-family:Simsun"
            >{{ row4 }}</p>
            <p
              style="margin: 0px; font-weight: bold; font-size: 18px;margin-top: 5px;color: #000;font-family:Simsun"
            >{{ item.phoneNumber }}</p>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('qrCode')"
      :visible.sync="dialogQrCodeVisible"
    >
      <el-row :gutter="20">
        <el-col :span="12" style="margin-top: 5px">
          <el-input v-model="title" placeholder="标题"/>
        </el-col>
        <el-col :span="12" style="margin-top: 5px">
          <el-input v-model="row1" placeholder="第一行"/>
        </el-col>
        <el-col :span="12" style="margin-top: 5px">
          <el-input v-model="row2" placeholder="第二行"/>
        </el-col>
        <el-col :span="12" style="margin-top: 5px">
          <el-input v-model="row3" :placeholder="$t('deviceCore')"/>
        </el-col>
        <el-col :span="12" style="margin-top: 5px">
          <el-input v-model="row4" placeholder="第四行"/>
        </el-col>
        <el-col :span="12" style="margin-top: 5px">
          <el-radio v-model="coreCut" label="0">全设备码</el-radio>
          <el-radio v-model="coreCut" label="1">设备码切割</el-radio>
        </el-col>
      </el-row>
      <el-button
        style="margin-top: 5px"
        type="primary"
        @click="printQrCode('solar')"
      >
        {{ $t('created') }}{{ $t('qrCode') }}
      </el-button>
    </el-dialog>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCommonSettingVisible"
      destroy-on-close
      width="1400px"
      top="15px"
    >
      <device-list-setting
        v-if="dialogCommonSettingVisible"
        :device-core-list="chooseDeviceCoreList"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :title="$t('buy')"
      :visible.sync="dialogBindUserVisible"
    >
      <el-form @submit.native.prevent>
        <el-form-item :label="$t('user')+$t('name')" label-width="20%">
          <el-input v-model="userName"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBindUserVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="batchBindUser">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('permission')"
      :visible.sync="dialogBelongUserVisible"
    >
      <el-form @submit.native.prevent>
        <el-form-item :label="$t('user')+$t('name')" label-width="20%">
          <el-input v-model="userName"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBelongUserVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="batchBelongUser">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-drawer
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="uni-scroll" style="height: calc(100vh - 100px)">
        <sensor-camera-list :device="device"/>
      </div>
    </el-drawer>

    <el-dialog
      :visible.sync="dialogAnalysisVisible"
      top="15px"
      width="90%"
    >
      <device-sensor-analysis v-if="dialogAnalysisVisible" :device-core-list="chooseDeviceCoreList"/>
    </el-dialog>

    <el-dialog
      :title="$t('tag')"
      :visible.sync="dialogTagVisible"
    >
      <tag-device v-if="dialogTagVisible" :device="device"/>
    </el-dialog>

    <el-dialog
      :title="$t('add')"
      :visible.sync="dialogAddDeviceVisible"
    >
      <el-form @submit.native.prevent>
        <el-form-item :label="$t('deviceCore')" label-width="20%">
          <el-input v-model="deviceCore"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddDeviceVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="changeCompany">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { treeCompanyDept } from '@/api/auth/authCompanyDeptApi'
import TagDevice from '@/components/TagDevice'
import {
  failureNotice,
  formatDate,
  formatDeviceStatus,
  formatPhoneStatus,
  listDeviceStatus,
  successNotice
} from '@/util/common'
import {
  getCompanyId,
  getDeptId,
  getPageSize,
  getQrCodeTemp,
  getSearchDeviceName,
  getSearchDeviceStatus,
  setPageSize,
  setQrCodeTemp,
  setSearchDeviceName,
  setSearchDeviceStatus
} from '@/util/storage'
import {
  deviceBindUser,
  pageGetDeviceDetailsByCompany,
  updateDevice,
  updateDeviceCompany,
  updateDeviceDept
} from '@/api/iot/iotDeviceApi'
import { insertBelong } from '@/api/iot/iotDeviceBelongApi'
import DeviceSetting from '@/components/DeviceSetting'
import DeviceListSetting from '@/components/DeviceListSetting'
import CompanyProductSeriesCascade from '@/components/CompanyProductSeriesCascade'
import SensorCameraList from '@/components/SensorCameraList'
import ProvinceCityCascade from '@/components/ProvinceCityCascade'
import CompanyDeviceSearch from '@/components/CompanyDeviceSearch'
import DeviceSensorAnalysis from '@/components/DeviceSensorAnalysis'
import { listCompanyChild } from '@/api/auth/authCompanyApi'

export default {
  name: 'BatchModel',
  components: {
    ProvinceCityCascade,
    DeviceSetting,
    CompanyProductSeriesCascade,
    SensorCameraList,
    CompanyDeviceSearch,
    DeviceSensorAnalysis,
    DeviceListSetting,
    TagDevice
  },
  data() {
    return {
      dialogTagVisible: false,
      dialogAnalysisVisible: false,
      extendSearch: false,
      dialogChangeDeptVisible: false,
      dialogChangeCompanyVisible: false,
      drawer: false,
      dialogAddDeviceVisible: false,
      dialogBindUserVisible: false,
      dialogBelongUserVisible: false,
      dialogCommonSettingVisible: false,
      status: getSearchDeviceStatus(),
      hardVersion: null,
      softVersion: null,
      statusList: [],
      deviceList: [],
      deviceCores: [],
      currentPage: 0,
      total: 0,
      pageSize: getPageSize(),
      provinceId: null,
      cityId: null,
      productId: null,
      seriesId: null,
      device: {},
      deviceName: getSearchDeviceName(),
      deviceCore: null,
      phoneNumber: null,
      dialogLocalVisible: false,
      form: {
        seriesName: '',
        seriesDesc: ''
      },
      userName: null,
      activeNames: null,
      dialogAddProductSeriesFormVisible: false,
      changeProductId: null,
      changeProductList: [],
      productSeriesList: [],
      enable: 1,
      lockLocal: 0,
      iconUrl: null,
      chooseDeviceCoreList: [],
      dialogQrCodeVisible: false,
      qrCodes: [],
      qrCodePrintTemp: 'solar',
      coreCut: '0',
      title: '',
      row1: '',
      row2: '',
      row3: '',
      row4: '',
      templateDeviceCore: null,
      showSetting: false,
      companyList: [],
      companyId: parseInt(getCompanyId()),
      search: {},
      treeDeptData: [],
      deptId: null,
      warnDesc: null
    }
  },
  mounted() {
    const param = this.$route.query
    const isDept = !!(param.isDept && param.isDept === '1')
    if (isDept) {
      this.deptId = parseInt(getDeptId())
    }
    if (getQrCodeTemp()) {
      const qrCodeTemp = JSON.parse(getQrCodeTemp())
      this.coreCut = qrCodeTemp.coreCut
      this.title = qrCodeTemp.title
      this.row1 = qrCodeTemp.row1
      this.row2 = qrCodeTemp.row2
      this.row3 = qrCodeTemp.row3
      this.row4 = qrCodeTemp.row4
    }
    this.statusList = listDeviceStatus(this)
    this.pageGetDeviceDetailsByCompany()
    this.treeCompanyDept()
    this.listCompanyChild()
  },
  methods: {
    changeCompany() {
      updateDevice({
        companyId: this.companyId,
        deptId: this.deptId,
        deviceCore: this.deviceCore
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
      })
    },
    listCompanyChild() {
      listCompanyChild({
        parentCompanyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.companyList = data
        }
      })
    },
    changeDept() {
      updateDeviceDept({
        deptId: this.deptId,
        deviceCore: this.chooseDeviceCoreList[0]
      }).then(res => {
        if (res.code === '200') {
          for (let j = 0, k = this.deviceList.length; j < k; j++) {
            if (this.deviceList[j].deviceCore === this.chooseDeviceCoreList[0]) {
              this.$refs.multipleTable.toggleRowSelection(this.deviceList[j])
              break
            }
          }
          if (this.chooseDeviceCoreList.length) {
            this.changeDept()
          }
        } else {
          failureNotice(this)
        }
      })
    },
    treeCompanyDept() {
      treeCompanyDept({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.treeDeptData = data
        }
      })
    },
    searchChange(item) {
      this.search = item
      this.pageGetDeviceDetailsByCompany()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    batchBindUser() {
      deviceBindUser({
        userName: this.userName,
        deviceCore: this.chooseDeviceCoreList[0]
      }).then(res => {
        if (res.code === '200') {
          for (let j = 0, k = this.deviceList.length; j < k; j++) {
            if (this.deviceList[j].deviceCore === this.chooseDeviceCoreList[0]) {
              this.$refs.multipleTable.toggleRowSelection(this.deviceList[j])
              break
            }
          }
          if (this.chooseDeviceCoreList.length) {
            this.batchBindUser()
          }
        } else {
          failureNotice(this)
        }
      })
    },
    batchBelongUser() {
      insertBelong({
        userName: this.userName,
        deviceCore: this.chooseDeviceCoreList[0]
      }).then(res => {
        if (res.code === '200') {
          for (let j = 0, k = this.deviceList.length; j < k; j++) {
            if (this.deviceList[j].deviceCore === this.chooseDeviceCoreList[0]) {
              this.$refs.multipleTable.toggleRowSelection(this.deviceList[j])
              break
            }
          }
          if (this.chooseDeviceCoreList.length) {
            this.batchBelongUser()
          }
        } else {
          failureNotice(this)
        }
      })
    },
    changeDeviceListCompany() {
      updateDeviceCompany({
        companyId: this.companyId,
        deviceCore: this.chooseDeviceCoreList[0]
      }).then(res => {
        if (res.code === '200') {
          for (let j = 0, k = this.deviceList.length; j < k; j++) {
            if (this.deviceList[j].deviceCore === this.chooseDeviceCoreList[0]) {
              this.$refs.multipleTable.toggleRowSelection(this.deviceList[j])
              break
            }
          }
          if (this.chooseDeviceCoreList.length) {
            this.changeDeviceListCompany()
          }
        } else {
          failureNotice(this)
        }
      })
    },
    formatPhoneStatus(item) {
      return formatPhoneStatus(this, item.phoneStatus)
    },
    formatDeviceStatus(item) {
      const status = formatDeviceStatus(this, item.status)
      let time
      switch (item.status) {
        case 'ONLINE':
          time = this.formatDate(item.lastOnLineTimer)
          break
        default:
          time = this.formatDate(item.lastOffLineTimer)
      }
      return status + ' ' + time
    },
    doPrint() {
      const newstr = document.getElementsByClassName('printOrder-data')[0]
        .innerHTML
      document.body.innerHTML = newstr
      window.print()
      // 重新加载页面，以刷新数据
      window.location.reload()
    },
    printQrCode(temp) {
      setQrCodeTemp(
        JSON.stringify({
          coreCut: this.coreCut,
          title: this.title,
          row1: this.row1,
          row2: this.row2,
          row3: this.row3,
          row4: this.row4
        })
      )
      this.qrCodePrintTemp = temp
      const dataList = []
      for (let i = 0; i < this.chooseDeviceCoreList.length; i++) {
        const data = {
          deviceCore: this.chooseDeviceCoreList[i],
          img:
            window.VUE_APP_BASE_API +
            '/device/qrcode?deviceCore=' +
            this.chooseDeviceCoreList[i] + '&companyId=' + this.companyId + '&withIcon=0'
        }
        if (this.coreCut === 1) {
          data.deviceCore = this.chooseDeviceCoreList[i].split('_')[1]
        }
        dataList.push(data)
      }
      this.qrCodes = dataList
      this.dialogAddProductSeriesFormVisible = false
      this.dialogQrCodeVisible = true
    },
    handleChange(val) {
      this.activeNames = val
    },
    handleSelectionChange(val) {
      const chooseDeviceCoreList = []
      val.forEach(function(row) {
        chooseDeviceCoreList.push(row.deviceCore)
      })
      this.chooseDeviceCoreList = chooseDeviceCoreList
    },
    warnDescDevices() {
      this.currentPage = 1
      this.warnDesc = true
      this.pageGetDeviceDetailsByCompany()
    },
    unWarnDescDevices() {
      this.currentPage = 1
      this.warnDesc = null
      this.pageGetDeviceDetailsByCompany()
    },
    getSensor(item) {
      this.device = item
      this.drawer = true
    },
    statusChange() {
      this.currentPage = 1
      this.pageGetDeviceDetailsByCompany()
      setSearchDeviceStatus(this.status)
    },
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetDeviceDetailsByCompany()
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetDeviceDetailsByCompany()
    },
    searchNameChange() {
      this.currentPage = 0
      this.pageGetDeviceDetailsByCompany()
      setSearchDeviceName(this.deviceName)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceDetailsByCompany()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceDetailsByCompany()
    },
    deviceClick(item) {
      this.device = item
    },
    tag(item) {
      this.device = item
      this.dialogTagVisible = true
    },
    gotoManage(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + item.deviceCore,
        query: { deviceCore: item.deviceCore, deviceName: item.deviceName }
      })
    },
    deviceSetting(item, index) {
      this.device = item
      this.showSetting = true
    },
    pageGetDeviceDetailsByCompany() {
      this.chooseDeviceCoreList = []
      const req = {
        productId: this.productId,
        seriesId: this.seriesId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        status: this.status,
        phoneNumber: this.phoneNumber,
        companyId: this.companyId,
        provinceId: this.provinceId,
        cityId: this.cityId,
        deptId: this.deptId,
        search: this.search,
        withInfo: true,
        warnDesc: this.warnDesc
      }
      if (this.deviceName != null && this.deviceName !== '') {
        req.deviceName = this.deviceName
      }
      pageGetDeviceDetailsByCompany(req).then(res => {
        const { code, data } = res
        if (code === '200') {
          const deviceCoreList = []
          this.total = data.total
          for (let i = 0; i < data.data.length; i++) {
            deviceCoreList.push(data.data[i].deviceCore)
          }
          this.deviceCores = deviceCoreList
          if (data.data[0]) {
            this.device = data.data[0]
          }
          this.deviceList = data.data
        }
      })
    },
    phoneNumberChange() {
      this.currentPage = 0
      this.pageGetDeviceDetailsByCompany()
    }
  }
}
</script>
<style scoped>

.qrCode {
  width: 475px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}

.qrCode2 {
  width: 475px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 530px;
}
</style>
